#footer {
  position: relative;
  padding: 40px 10px 120px 10px;
  width: 100%;
  color: fade(@color_text_main, 50%);
  margin: 0px auto;
  font-size: @fontsize_small;
  overflow: hidden;
  text-align: center;
  font-family: @fontfamily_base;
  .licenses {
    color: fade(@color_text_main, 50%);
    text-decoration: underline;
  }
  .codename {
    // color: @color_vue;
    text-decoration: underline;
  }
  .social-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 4px @gap/2;
  }
  a {
    color: fade(@color_text_main, 70%);
    padding: 0;
    .enable-trans();
    &:hover {
      color: @color_text_highlight;
    }
    &.social {
      position: relative;
      display: inline-block;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 32px;
      height: 32px;
      margin: 4px;
      border-radius: 100px;
      &:hover {
        background: fade(@theme_main, 10%);
        color: @theme_main;
      }
    }
  }
  @media(max-width: @on_pad){
    justify-content: center;
  }
}
